import React, { Component } from 'react';
import { Carousel, NavBar, Icon } from 'antd-mobile'
import { getProDetail } from '../../api/detail'
// import { useHistory } from 'react-router-dom'
export default class Index extends Component {
  state = {
    proid: '',
    proDetail: '',
    banners: []
  }
  componentDidMount() {
    this.setState({
      proid: this.props.match.params.proid
    })
    this.getProDetail()
  }
  // this.banners = proDetail.data.data.banners[0].split(',')
  getProDetail() {
    getProDetail(this.props.match.params.proid).then(res => {
      console.log(res.data.data)
      this.setState({
        proDetail: res.data.data,
        banners: res.data.data.banners[0].split(',')
      })
    })
  }


  render() {
    // const history = useHistory()
    return (
      <div className="box">
        <header className="header">
          <NavBar
            mode="light"
            icon={<Icon type="left" />}
            onLeftClick={() => console.log('onLeftClick')}
            rightContent={[
              <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
              <Icon key="1" type="ellipsis" />,
            ]}
          >商品详情</NavBar>
        </header>
        <div className="content">
          <Carousel
            autoplay={true}
            infinite
          >
            {this.state.banners && this.state.banners.map(item => (
              <a
                key={item}
                href={item}
                style={{ display: 'inline-block', width: '100%', height: '350px', overflow: 'hidden' }}
              >
                <img
                  src={item}
                  alt={item}
                  style={{ width: '100%', verticalAlign: 'middle' }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event('resize'));
                  }}
                />
              </a>
            ))}
          </Carousel>
          <p>{this.state.proDetail.originprice}</p>
          <h4>{this.state.proDetail.proname}</h4>
        </div>
      </div>
    );
  }
}